<!DOCTYPE html>
<html>

<!-- <head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="icon" type="image" href="./favicon.ico" />
	<title>
		<%= title %>
	</title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
	<link rel='stylesheet' href='/stylesheets/swiper-bundle.min.css' />
	<link rel='stylesheet' href='/stylesheets/about.css' />

	<script src="/javascripts/swiper-bundle.min.js"></script>
	<script src="/javascripts/jquery.min.js"></script>
</head> -->

<%- include("head.ejs", {title: title}) %>


<body>

	<div>
		<%- include("header.ejs", {title: title}) %>
	</div>
	<div class="mb40">


		<div class="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide">
					<div class="content">
						<h1>探索科技之美</h1>
						<p>务实·创新·卓越·技术</p>
					</div>
					<img src="./images/banner-about.png" alt="">
				</div>
			</div>
		</div>

	</div>
	<div class="gd-main gd-bflex mb60">
		<div class="left-nav">
			<div class="letf-title">关于千叶</div>
			<ul>
				<%for(var i=0; i < leftList.length; i++){%>
					<li class="tab_item">
						<%=leftList[i].title%>
					</li>
				<%}%>
			</ul>
		</div>
		<div class="rigth-nav">
			<ul class="rigth-content">
				<li class="item active">
					<%- include("title.ejs", {title: '公司简介' , border: true}) %>
						<div class="mb20">
							深圳市千业工作室科技有限公司成立于2022年，位于深圳市龙岗区，专注软件设计与开发等业务，一直秉承务实、创新卓越和技术的核心价值观，为客户提供新产品开发服务与数字化转型技术研究咨询，以及技术解决方案等IT相关服务。我们的业务范围包括但不限于移动客户端APP开发、后台管理系统开发、网站系统建设、020平台开发与020模式-PC+移动020商城系统，以及IT咨询等。从项目方案的整理到交付后的维护都有专门的负责人跟进，及时处理客户的问题，提供合理的解决方案;确保客户的应用始终保持最佳性能和安全性。我们紧跟技术发展的步伐，掌握最新的编程语言与框架并应用到项目中。未来也将继续以“深耕科技、构筑未来”为文化理念，继续探索科技，发掘科技的魅力。
						</div>
						<%- include("title.ejs", {title: '业务流程' , border: true}) %>
							<div>
								<img src="./images/business.png" alt="">
							</div>
				</li>
				<li class="item">
					<%- include("title.ejs", {title: '公司文化' , border: true}) %>

						<div class="content">
							<div class="rigth-title">
								<p>愿景</p>
								<div class="border"></div>
								<p class="sub-title">VISION</p>
							</div>
							<div class="info">
								创新科技，应用科技；遍历生活，享受生活。
							</div>
						</div>
						<div class="content">
							<div class="rigth-title">
								<p>使命</p>
								<div class="border"></div>
								<p class="sub-title">MISSION</p>
							</div>
							<div class="info">
								将科技融入生活方方面面。
							</div>
						</div>
						<div class="content">
							<div class="rigth-title">
								<p>核心价值观</p>
								<div class="border"></div>
								<p class="sub-title">CORE VALUES</p>
							</div>
							<div class="info">
								<ul class="list-value gd-bflex">
									<li>
										<p class="">务实</p>
										<p class="en">pragmatism</p>
									</li>
									<li>
										<p class="">创新</p>
										<p class="en">innovation</p>
									</li>
									<li>
										<p class="">卓越</p>
										<p class="en">excellence</p>
									</li>
									<li>
										<p class="">技术</p>
										<p class="en">technology</p>
									</li>
								</ul>
							</div>
						</div>

				</li>
				<li class="item">
					<%- include("title.ejs", {title: '发展历程' , border: true}) %>
					<div class="mb20">
						<ul class="time-line">
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
							<li>发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程发展历程</li>
						</ul>
						

						<img src="./images/img1.png" alt="">
					</div>
				</li>
				<li class="item">
					<%- include("title.ejs", {title: '荣誉资质' , border: true}) %>

					<div class="honor-box">
						<%for(var i=0; i < honorList.length; i++){%>
							<div class="pic">
								<img src="<%- honorList[i].src%>">
							</div>
						<%}%>
					</div>
				</li>
				<li class="item">
					<%- include("title.ejs", {title: '未来规划' , border: true}) %>
					<img src="./images/header.png" alt="">
				</li>
				<li class="item">
					<%- include("title.ejs", {title: '组织架构' , border: true}) %>
					<img src="./images/dept.png" alt="">
				</li>
				<li class="item">
					<%- include("title.ejs", {title: '成员风采' , border: true}) %>
					<div class="mb40">
						<img src="./images/header.png" alt="">
					</div>
					
					<div class="staff-box">
						<%for(var i=0; i < honorList.length; i++){%>
							<div class="pic">
								<img src="<%- honorList[i].src%>">
								<p><%=honorList[i].msg%></p>
							</div>
						<%}%>
					</div>

				</li>
			</ul>

		</div>
	</div>






	<div class="gd-main mb60 first">
		<%- include("title.ejs", {title: '主营业务' , border: false}) %>
			<div class="pic-box gd-bflex">
				<%for(var i=0; i < infoList.length; i++){%>
					<div class="item">
						<div class="pic">
							<img src="<%- infoList[i].src%>">
						</div>
						<div class="msg">
							<h4>
								<%=infoList[i].title%>
							</h4>
							<p>
								<%=infoList[i].msg%>
							</p>
						</div>

					</div>
					<%}%>
			</div>
	</div>

	<div class="gd-main brd mb60 second hide">
		<div>
			<img src="./images/img2.png" alt="">
		</div>
			<div class="img-box gd-bflex">
				<%for(var i=0; i < infoList.length; i++){%>
					<div class="item">
						<div class="msg">
							<h4>
								<%=infoList[i].info%>
							</h4>
							<p>
								<%=infoList[i].msg%>
							</p>
						</div>

					</div>
					<%}%>
			</div>
	</div>









	<div>
		<%- include("footer.ejs") %>
	</div>

	<script>
		var mySwiper = new Swiper('.swiper', {
			watchOverflow: true,//因为仅有1个slide，swiper无效
			navigation: {
				nextEl: '.swiper-button-next',//自动隐藏
				prevEl: '.swiper-button-prev',//自动隐藏
			},
			pagination: {
				el: '.swiper-pagination',//自动隐藏
			},
			scrollbar: {
				el: '.swiper-scrollbar',//自动隐藏
			},
		})
		$(".left-nav ul li").click(function () {
			var index = $(this).index();
			console.log(index);
			if(index === 0){
				$(".first").removeClass("hide").addClass("show")
				$(".second").removeClass("show").addClass("hide")
			}
			if(index === 1){
				$(".first").removeClass("show").addClass("hide")
				$(".second").removeClass("hide").addClass("show")
			}
			if(index > 1){
				$(".first").removeClass("show").addClass("hide")
				$(".second").removeClass("show").addClass("hide")
			}
			$(".left-nav ul li").removeClass("active")
			$(this).addClass("active")
			$(".rigth-nav .rigth-content .item").removeClass("active")
			$(".rigth-nav .rigth-content .item").eq(index).addClass("active")
		})
	</script>

</body>

</html>